﻿<script setup lang="ts" name="IconList">
import { getIconList, iconTypeList } from '@/plugins/svgIcon'
import { cloneDeep } from 'lodash-es'
import { randomColor } from '@/utils/theme'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import useCopyToClipboard from '@/hooks/copyToClipboard'
import { errorMessage, successMessage } from '@/utils/message'
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const { copyToClipboard } = useCopyToClipboard()
const { clipboardRef, copiedRef } = copyToClipboard()
const iconList = getIconList()
const iconTypeData = iconTypeList()
type searchDataType = {
  pageIndex: number,
  pageSize: number,
  type: string,
  name: string,
  fontSize: number,
  isColor: boolean,
}
const searchData = ref<searchDataType>({
  pageIndex: 1,
  pageSize: 72,
  type: '',
  name: '',
  fontSize: 28,
  isColor: false
})
const getInitData = () => {
  initData.data = []
  let resultData = cloneDeep(iconList)
  if (searchData.value.type !== '') {
    resultData = resultData.filter((item) => { return item.type === searchData.value.type })
  }
  if (searchData.value.name !== '') {
    resultData = resultData.filter((item) => { return item.key.includes(searchData.value.name) })
  }
  initData.total = resultData.length
  initData.data = resultData.slice(
    searchData.value.pageSize * (searchData.value.pageIndex - 1),
    searchData.value.pageSize * (searchData.value.pageIndex - 1) + searchData.value.pageSize
  )
}
const initData: any = reactive({
  data: [],
  total: 0
})
const handleSizeChange = (val: number) => {
  searchData.value.pageSize = val
  searchData.value.pageIndex = 1
  getInitData()
}
const handleCurrentChange = (val: number) => {
  searchData.value.pageIndex = val
  getInitData()
}
getInitData()
const searchChangeHandler = () => {
  searchData.value.pageIndex = 1
  getInitData()
}

// 复制图标组件
const handleCopyComponent = (item) => {
  if (!item) {
    errorMessage('复制失败！')
    return
  }
  const svgComponent = '<svg-icon icon="' + item.type + ':' + item.key + '" size="' + searchData.value.fontSize + '" color="' + (searchData.value.isColor ? randomColor() : '') + '"></svg-icon>'
  clipboardRef.value = svgComponent
  if (unref(copiedRef)) {
    successMessage('复制' + svgComponent + '成功！')
  }
}

// 复制图标名文本
const handleCopyText = (item) => {
  if (!item) {
    errorMessage('复制失败！')
    return
  }
  const svgComponent = item.type + ':' + item.key
  clipboardRef.value = svgComponent
  if (unref(copiedRef)) {
    successMessage('复制 ' + svgComponent + ' 成功！')
  }
}
</script>
<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="searchData.name" :placeholder="$t('placeholders.placeholderInputIconName')" class="input-with-select" clearable style="width: 340px" @change="searchChangeHandler">
            <template #prepend>
              <el-select v-model="searchData.type" :placeholder="$t('placeholders.placeholderSelectIconType')" style="width: 136px" clearable @change="searchChangeHandler">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in iconTypeData" :key="index" />
              </el-select>
            </template>
            <template #append>
              <el-button icon="Search" @click="searchChangeHandler" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item><el-input-number v-model="searchData.fontSize" :min="12" :max="40" style="width: 120px" /></el-form-item>
        <el-form-item><el-checkbox v-model="searchData.isColor" label="多彩图标" border /></el-form-item>
      </el-form>
      <el-row :gutter="systemConfig.space">
        <el-col :xs="8" :sm="6" :md="3" :lg="2" :xl="2" v-for="(item, index) in initData.data" :key="index">
          <el-card shadow="hover" :title="item.key" @click="handleCopyComponent(item)">
            <svg-icon :icon="item.type + ':' + item.key" :size="searchData.fontSize" :color="searchData.isColor ? randomColor() : ''"></svg-icon>
            <span class="icon-copy">点击复制</span>
          </el-card>
          <span class="icon-text" :title="item.key" @click="handleCopyText(item)">{{ item.key }}</span>
        </el-col>
      </el-row>
      <el-pagination
        v-if="initData.total > 0"
        v-model:currentPage="searchData.pageIndex"
        v-model:page-size="searchData.pageSize"
        :page-sizes="[72, 144, 216, 288]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="initData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-pagination {
  justify-content: center;
  margin-top: var(--el-space);
}

.el-form {
  margin: -6px -6px 14px;
}

.el-row {
  .el-col {
    cursor: pointer;

    .el-card {
      :deep(.el-card__body) {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70px;
        padding: 15px;
        overflow: hidden;
        transition: all 0.28s;

        .icon-copy {
          position: absolute;
          bottom: -20px;
          left: 0;
          display: block;
          width: 100%;
          height: 20px;
          color: var(--el-color-white);
          line-height: 20px;
          text-align: center;
          background: var(--el-color-primary);
          transition: all 0.28s;
        }
      }

      &:hover {
        :deep(.el-card__body) {
          padding: 5px 15px 25px;

          .icon-copy {
            bottom: 0;
          }
        }
      }
    }

    .icon-text {
      display: block;
      width: 100%;
      height: 30px;
      overflow: hidden;
      font-size: var(--el-font-size-extra-small);
      line-height: 30px;
      white-space: nowrap;
      text-align: center;
      text-overflow: ellipsis;
    }
  }
}
</style>
